<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>入库表</title>
    <script src="/res/layui/layui.js"></script>
    <script src="/res/js/jquery.js"></script>
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <form id="selectform">
        <div class="layui-input-inline" style="margin-left: 30px">

            <div class="layui-input-inline">
                <input type="text" id="keyWord" name="keyWord" class="layui-input" placeholder="根据关键字查询"
                       autocomplete="off">
            </div>
            <div class="layui-input-inline">
                <input type="text" id="time" name="time"
                       class="layui-input" placeholder="该时间之后的出入库情况" readonly autocomplete="off">
            </div>
        </div>
        <div class="layui-input-inline">
            <input type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="select" value="查询"/>
        </div>
    </form>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
</div>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-input-inline">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">批量删除</button>
    </div>
</script>


<script>
    var table;
    layui.use(['layer', 'table', 'jquery', 'element', 'upload','laydate'], function () {
        var layer = layui.layer; //弹层
        table = layui.table; //表格
        var $ = layui.$;//jquery
        var upload = layui.upload; //上传
        var element = layui.element; //元素操作
        var laydate = layui.laydate //日期

        layer.msg('入库页面');

        laydate.render({
            elem: '#time'
            ,type:'datetime'
        });


        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , id: 'inStorage'
            , height: 560
            , url: '/logisticsInStorage/queryAll' //数据接口
            , title: '仓库表'
            , page: true //开启分页
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'inStorageId', title: '入库ID', width: 150, sort: true, fixed: 'left'}
                , {field: 'storageName', title: '仓库名', width: 150, sort: true}
                , {field: 'waybillId', title: '运单编号', width: 150, sort: true}
                , {field: 'inStoragePrevious', title: '上一站', width: 200}
                , {field: 'inStorageNext', title: '下一站', width: 200}
                , {field: 'inStorageGetTime', title: '入库时间', width: 150, sort: true}
                , {field: 'inStorageOutTime', title: '出库时间', width: 150, sort: true}
                , {fixed: 'right', width: 170, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 2,
                        maxmin: true,
                        title: "添加入库信息",
                        area: ['950px', '650px'],
                        content: "/pages/storage/instorageForm.html"//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('真的删除这些数据么', function (index) {
                            layer.msg('删除');
                            let inStorageId = "";
                            for (let i = 0; i < data.length; i++) {
                                inStorageId += data[i].inStorageId + ",";
                            }
                            let ids = inStorageId.substr(0, inStorageId.length - 1);
                            var url = "/logisticsInStorage/deleteAll";
                            var data2 = {ids: ids};
                            $.post(url, data2, function (resp) {
                                if (resp.code == 0) {
                                    layer.msg(resp.msg);
                                    table.reload('inStorage');
                                } else {
                                    layer.msg(resp.msg);
                                }
                            }, "json");
                        })
                    }
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);//关闭弹出框
                    //向服务端发送删除指令
                    var url = "/logisticsInStorage/delete";
                    var data2 = {id: data.inStorageId};
                    $.post(url, data2, function (resp) {
                        if (resp.code == 0) {
                            layer.msg("删除成功");
                            table.reload('inStorage');
                        } else {
                            layer.msg("删除失败");
                        }
                    }, "json")
                });
            } else if (layEvent === 'edit') {
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 2,
                    maxmin: true,
                    title: "修改入库信息",
                    area: ['950px', '650px'],
                    content: "/pages/storage/instorageForm.html?id=" + data.inStorageId,//引用的弹出层的页面层的方式加载修改界面表单
                });
            }
        });

    });

    $(function (){
        $("#select").on("click",function (){
            var data2 = {
                keyWord:$("#keyWord").val(),
                time:$("#time").val()
            };
            table.reload('inStorage',{
                page: {
                    curr:1
                }
                ,where:data2
            })
            //table.render();
        })
    })

</script>

</body>
</html>